{% extends 'base.html' %}

{% load static %}

{% block title %}即住{% endblock %}
{% block noon %}
    <div class="details">
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="/index/">主页面</a></li>
                <li class="active">详情</li>
            </ol>
            <div class="roses-head">
                <a href="/index/"><h2>即住</a><span>|</span><span>住的不一样</span></h2>
            </div>
        </div>
    </div>
    <!---->
    <div class="features" id="features">
        <div class="container">
            <div class="tabs-box">
                <div class="tab-grids">
                    <div id="tab1" class="tab-grid1">
                        <!-- 图片及内容 -->
                        <div id="myCarousel" class="carousel slide"> <!--设置轮播器区域样式，设置轮播器滚动样式-->
                            <ol class="carousel-indicators">  <!--设置轮播器列表区域样式，就是小圆点区域样式-->
                                {% for img in houseimgs %}
                                    <li data-target="#myCarousel" data-slide-to="{{ forloop.counter0 }}"
                                    {% if forloop.counter0 == 0 %} class="active">
                                        {% else %}>
                                    {% endif %}</li>
                                {% endfor %}
                            </ol>

                            <div class="carousel-inner"> <!--设置轮播器图片区域-->
                                {% for img in houseimgs %}
                                    <div id="detail-images" class="item tp{{ forloop.counter }}
                                    {% if forloop.counter == 1 %}active
                                        {% else %}">
                                    {% endif %}
                                        <a href="#"><img src="{{ img.imgsrc }}" alt="第二张" width="1140px" height="450px"></a>
                                    </div>
                                 {% endfor %}
                            </div>

                            <!--设置轮播器箭头区域-->
                            <a href="#myCarousel" data-slide="prev" class="carousel-control left">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a href="#myCarousel" data-slide="next" class="carousel-control right">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>

                        <div class="row">
                            <div class="col-xs-12 col-md-8">

                                <!-- 标题 -->
                                <h1 class="detail__title" itemprop="name">
                                    {% for house in houses %}
                                        <span class="houseid" hidden="hidden">{{ house.id }}</span>
                                        <a href="#">{{ house.name }}</a>
                                    {% endfor %}
                                </h1>

                                <!-- 内部情况 -->
                                <div class="product-base-info">
                                    {% for tag in tags %}
                                        <span>{{ tag.name }}</span>
                                    {% endfor %}
                                </div>
                                <section class="block">
                                    <ul class="details">
                                        <h2><img src="/static/images/icon/描个性述.png" width="30px" height="30px">个性描述</h2>
                                        {% for house in houses %}
                                            <li>{{ house.sindecripe }}</li>
                                            <li>{{ house.insiposition }}</li>
                                        {% endfor %}
                                    </ul>
                                </section>

                                <!-- 交通情况 -->
                                <section class="block">
                                    <h2><img src="/static/images/icon/交通情况.png" width="30px" height="30px">交通情况</h2>
                                    <ul class="" itemprop="description">
                                        {% for house in houses %}
                                            <li>{{ house.placename }}</li>
                                        {% endfor %}
                                    </ul>
                                </section>

                                <!-- 周边情况 -->
                                <section class="block">
                                    <h2><img src="/static/images/icon/周边情况.png" width="30px" height="30px">周边情况</h2>
                                    <ul class="" itemprop="description">
                                        {% for house in houses %}
                                            <li>{{ house.traficposition }}</li>
                                            <li>{{ house.arround }}</li>
                                        {% endfor %}
                                    </ul>
                                </section>


                                <!-- 配套设施 -->
                                <div class="intro_item_content"
                                     style="overflow: hidden;margin-top: -30px">
                                    <ul class="pt_list clearfix details">
                                        <h2><img src="/static/images/icon/配套设施.png" width="30px" height="30px">配套设施</h2>
                                        {% for setting in settings %}
                                            {% if setting.name == "热水淋浴" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/热水淋浴.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "无线网络" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/无线网络.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "空调" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/空调.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "电视" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/电视.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "电梯" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/电梯.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "洗衣机" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/洗衣机.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "冰箱" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/冰箱.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "停车位" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/停车位.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "饮水设备" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/饮水设备.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "拖鞋" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/拖鞋.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "手纸" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/手纸.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "牙具" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/牙具.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "毛巾" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/毛巾.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "浴液洗发水" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/浴液洗发水.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "允许做饭" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/允许做饭.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "允许吸烟" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/允许吸烟.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "允许带宠物" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/允许带宠物.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "门禁系统" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/门禁系统.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "浴缸" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/浴缸.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "有线网络" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/有线网络.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "香皂" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/香皂.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "允许聚会" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/允许聚会.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "暖气" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/暖气.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "浴液" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/浴液.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "适宜儿童" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/适宜儿童.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "适宜老人" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/适宜老人.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% elif setting.name == "适宜残疾人" %}
                                                <li class="s_ico_shower"><img src="/static/images/icon/适宜残疾人.png" width="30px" height="30px">{{ setting.name }}</li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>


                                <!-- 入住须知 -->
                                <section class="product-detail__booking-notice">
                                    <h2><img src="/static/images/icon/入住须知.png" width="30px" height="30px">入住须知</h2>
                                    <h3>预订时长</h3>
                                    <ul>
                                        <li>{{ house_dict.time1 }}</li>
                                        <li>{{ house_dict.time2 }}</li>
                                    </ul>

                                    <h3>是否接待外宾</h3>
                                    <ul>
                                        <li>{{ house_dict.foreign }}</li>
                                    </ul>
                                    <h3>卫生间</h3>
                                    <ul>
                                        <li>{{ house_dict.toilet }}</li>
                                    </ul>
                                </section>
                            </div>
                            <div class="col-xs-12 col-md-4">
                                <div class="stoges">
                                    <hr/>
                                    <hr/>
                                    {% for stoge in stoges %}
                                        <div>
                                            <a class="stoges-title" href="#">{{ stoge.name }}</a>
                                        </div>
                                        <div>
                                            <img src="{{ stoge.imgsrc }}">
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="stoges reservation">
                                    <form action="/calculation/" method="post">
                                    {% csrf_token %}
                                        <div>
                                            <div class="selecttime">选择入住时间：<input type="date" name="startdate"/></div>
                                            <br/>
                                            <div class="selecttime">选择退房时间：<input type="date" name="enddate"/></div>
                                        </div>
                                        <div>
                                            <p>
                                                {% for house in houses %}
                                                    <span>￥：</span><span>{{ house.price }}</span>
                                                    <input type="hidden" value="{{ house.price }}" name="price">
                                                    <input type="hidden" value="{{ house.id }}" name="houseid">
                                                {% endfor %}
                                            </p>

                                            <a><button type="submit" class="btn btn-success">立即预定</button></a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <script>
        $('.carousel').carousel({
            interval: 2000
        })
    </script>
{% endblock %}